<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<view class="div">
				<view class="addaddress" @click="open">
					新增地址
				</view>
				<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
					@refresherrefresh="onRefresh" @refresherrestore="onRestore">
					<view class="items" v-for="(item, index) in list" :key="index">
						<view class="delete" @click="deleteClick(item)">
							<u-icon name="close"></u-icon>
						</view>
						<view class="right">
							<view class="header">
								<view class="title">{{ item.name }},{{ item.phone }}</view>
							</view>
							<view class="bottom">
								<view class="title">{{ item.provinceName }} {{ item.cityName }} {{ item.areaName }}
									{{ item.address }}
								</view>
							</view>
						</view>
						<view class="right">
							<view class="headers">
								<view class="xiugai" @click="xiugaiClick(item)">
									修改
								</view>
							</view>
						</view>
					</view>
					<view class="zanwu" v-if="list.length == 0">暂无数据</view>
					<u-loadmore v-if="list.length != 0" fontSize="25" :status="status" />
				</scroll-view>

				<u-popup :show="show" :round="10" mode="center" @close="close" :closeable="true">
					<view class="popup-box">
						<view class="title">
							{{ title }}
						</view>
						<u--form :model="model1" :rules="rules" ref="uForm" labelWidth="150">
							<u-form-item label="收货人:" prop="name">
								<u--input border="none" input-align="right" placeholder="请输入收货人" v-model="model1.name"
									clearable></u--input>
							</u-form-item>
							<u-form-item label="手机号:" prop="phone">
								<u--input input-align="right" type="number" maxlength="11" v-model="model1.phone"
									border="none" placeholder="请输入联系电话"></u--input>
							</u-form-item>
							<u-form-item label="地区" prop="addr" @click="showAddress = true;" ref="item1">
								<u--input input-align="right" v-model="model1.addr" disabled disabledColor="#ffffff"
									placeholder="请选择地区" border="none"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item>
							<cityPicker :column="3" :default-value="model1.addrValues" :mask-close-able="true"
								title='地区' @confirm="onConfirmAddress" @cancel="showAddress = false"
								:visible="showAddress" />
							<u-form-item label="详细地址:" prop="address">
								<u--textarea v-model="model1.address" maxlength="-1" clearable
									height="160"></u--textarea>
							</u-form-item>
						</u--form>

						<view class="btn-style">
							<u-button type="primary" text="保存" @click="save()"></u-button>
						</view>
					</view>
				</u-popup>
				
				
			</view>
		</view>
	</view>
</template>

<script>
import {
	userAddrMylist,
	addUserAddr,
	updateUserAddr,
	delUserAddr
} from '@/api/index.js'
import config from '@/config/config.js'
import {
	systemInfo
} from '../../utils/mixin'
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
export default {
	components: {
		cityPicker
	},
	mixins: [systemInfo],
	data() {
		return {
			list: [],
			show: false,
			title: '',
			showAddress: false,
			model1: {
				name: '',
				phone: '',
				address: '',
				addr: '',
			},
			rules: {
				name: [{
					type: 'string',
					required: true,
					message: '请输入收货人',
					trigger: ['blur', 'change']
				}],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}
				],
				address: [{
					type: 'string',
					required: true,
					message: '请输入详细地址',
					trigger: ['blur', 'change']
				}],
				addr: [{
					type: 'string',
					required: true,
					message: '请选择地区',
					trigger: ['blur', 'change']
				}]
			},


			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			status: 'loadmore',
			triggered: false,
			downRefresh: false,
			pageCount: 0,
		}
	},
	onLoad() {
		// 状态栏高度
		this.getSystemInfo();
		this.triggered = true;
		this.downRefresh = true
		this.queryParams.pageNum = 1
		this.list = []
		this.getcollectList()
	},
	methods: {
		open() {
			this.show = true
			this.title = '新增收货地址'
		},
		close() {
			this.show = false
			this.model1 = {
				name: '',
				phone: '',
				address: '',
				addr: '',
			}
		},
		// 修改
		xiugaiClick(item){
			this.show = true
			this.title = '修改收货地址'
			this.model1 = item
			this.model1.addr = `${this.model1.provinceName}-${this.model1.cityName}-${this.model1.areaName}`;
		},
		// 删除
		async deleteClick(item){
			const res = await delUserAddr(item.id)
			uni.$u.toast( "删除地址成功")
			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.list = []
			this.getcollectList()
		},
		/** 地址关闭 */
		onConfirmAddress(selectedOptions) {
			this.model1.addr =
				`${selectedOptions.provinceName}-${selectedOptions.cityName}-${selectedOptions.areaName}`;
			this.model1.provinceName = selectedOptions.provinceName
			this.model1.cityName = selectedOptions.cityName
			this.model1.areaName = selectedOptions.areaName
			this.$refs.uForm.validateField('addr')
			this.showAddress = false;
		},
		//接口保存
		save() {

			this.$refs.uForm.validate().then(async (valid) => {
				if (valid) {
					// 手动验证手机号
					if (!/^1[3-9]\d{9}$/.test(this.model1.phone)) {
						uni.$u.toast('请输入有效的手机号码');
						return;
					}

					if (this.model1.id) {
						await updateUserAddr(this.model1)
					} else {
						await addUserAddr(this.model1)
					}
					uni.$u.toast(this.model1.id ? "修改地址成功" : "新增地址成功")
					this.show = false
					this.close()
					this.triggered = true;
					this.downRefresh = true
					this.queryParams.pageNum = 1
					this.list = []
					this.getcollectList()
				} else {
					return false;
				}
			});
		},

		async getcollectList() {
			const res = await userAddrMylist({
				...this.queryParams
			})
			this.pageCount = res.total
			//停止加载中
			this.triggered = false;
			this.downRefresh = false
			//处理完逻辑停止刷新
			uni.stopPullDownRefresh();
			if (this.list.length >= this.pageCount) {
				this.status = 'nomore';
			} else {
				let arr = [...this.list, ...res.rows]
				this.list = arr
				if (res.rows.length < 10) {
					this.status = 'nomore';
				}
			}
		},

		//触底加载
		lowerBottom() {
			if (this.queryParams.pageNum < this.pageCount) {
				if (!this.downRefresh) {
					this.downRefresh = true
					this.status = 'loading';
					this.queryParams.pageNum += 1
				}
			}
		},
		onRefresh() {
			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.list = []
		},
		onRestore() {
			this.triggered = false; // 需要重置
		},
	}
}
</script>

<style lang="less" scoped>
.popup-box {
	width: 600rpx;
	padding: 0 50rpx 50rpx;

	.title {
		text-align: center;
		line-height: 100rpx;
	}

	/deep/.u-form-item {
		border-bottom: 1rpx solid #e1e2e4;
	}
}

.content {
	background-color: rgb(245, 245, 245);
	width: 100%;
	box-sizing: border-box;

	.view {
		width: calc(100% - 60rpx);
		height: calc(100% - 60rpx);
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		top: 30rpx;
		margin: auto;
		overflow: auto;
		border-radius: 15rpx;

		.top {
			width: 100%;
			border-bottom: 1px solid rgba(179, 173, 173, 0.2);
			display: flex;
			align-items: flex-end;
			box-sizing: border-box;
			padding-bottom: 20rpx;

			.top_items {
				font-size: 30rpx;
				color: rgb(179, 173, 173);
			}

			.top_items_active {
				font-size: 34rpx;
				color: #000;
			}
		}

		.div {
			width: 100%;
			height: calc(100% - 80rpx);

			.box_scroll {
				height: 100%;
			}
			

			.addaddress {
				width: 150rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #fff;
				font-size: 25rpx;
				background-color: red;
				border-radius: 10rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}
		}

		.zanwu {
			font-size: 30rpx;
			color: #b3adad;
			text-align: center;
			margin-top: 20px;
		}

		.items {
			width: 100%;
			// min-height: 140rpx;
			border-bottom: 1px solid rgba(179, 173, 173, 0.2);
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 10px 0;
			position: relative;
			flex-wrap: wrap;
			
			.delete{
				position: absolute;
				right: 10px;
				top: 12px;
			}

			

			.right {
				width: calc(100%);
				display: flex;
				align-items: center;
				align-content: center;
				flex-wrap: wrap;

				.header {
					width: 100%;

					.title {
						font-size: 30rpx;
						width: 100%;
					}

				}
				
				.headers{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.xiugai{
						width: 100rpx;
						height: 35rpx;
						text-align: center;
						line-height: 35rpx;
						font-size: 24rpx;
						border-radius: 5rpx;
						box-sizing: border-box;
						border: 1px solid rgba(179, 173, 173, 0.2);
					}
				}

				.bottom {
					width: 100%;
					margin-top: 15rpx;

					.title {
						font-size: 30rpx;
						width: 100%;
					}
				}
			}

		}

	}
}
</style>